<template>
    <div class="home">
        <h3>State测试</h3>
        <div>
            <p>原始:{{ a }}</p>
            <p>两倍:{{ doubleA }}</p>
            <p>三倍:{{ tripleA }}</p>
            <button @click="addA()">addA</button>

            <!-- 如果组件中要分发action封装的方法 -> this.$store.dispatch('actionName',arg) -->
            <button @click="$store.dispatch('addAAsync',100)">addAAsync</button>
            <button @click="addAAsync(100)">addAAsync</button>
            <hr>
            <p>原始:{{ b }}</p>
            <p>两倍:{{ doubleB }}</p>
            <p>三倍:{{ tripleB }}</p>
            <button @click="addB(2)">addB</button>
            <button @click="$store.dispatch('addBAsync',2)">addBAsync</button>
            <button @click="addAAsync(2)">addBAsync</button>
            <hr>
            <button @click="addBoth({m:1,n:2})">addBoth</button>
            <button @click="$store.dispatch('addBothAsync',{m:1,n:2})">addBothAsync</button>
            <button @click="addBothAsync({m:1,n:2})">addBothAsync</button>
            <hr>
            <button @click="addBothChain({m:1,n:2})">先加A在加B_异步</button>
            <hr>
            <p>(a+b)*2: {{ doubleBoth }}</p>
            <p>(a+b)*N: {{ bothN(10) }}</p>


        </div>

    </div>
</template>

<script>
import { mapState,mapMutations,mapGetters,mapActions} from "vuex";

export default {
    name: 'OtherView',
    data() {
        return {
            count: 10,
        }
    },
    methods:{
        ...mapMutations(["addA","addB","addBoth"]),
        ...mapActions(["addAAsync","addBAsync","addBothAsync","addBothChain"])
    },  
    computed: {
        // state
        ...mapState(["a","b"]),
        ...mapGetters(["doubleA","tripleA","doubleB","tripleB","doubleBoth","bothN"])
    },
    mounted() {
        console.log(this);
        console.log(this.$store);
        console.log(this.$store.state);
    }
}
</script>
